<template>
  <div class="project_type_set">
    <!--搜索栏-->
      <div class="searchBox">
        <el-input
          placeholder="请输入项目类型名进行搜索"
          style="width: 220px;"
          v-model="typeSetSearch">
        </el-input>
        <el-button type="primary"  @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
      </div>
    <!--新增类型按钮-->
    <el-row type="flex" class="table_btn">
      <el-col :span="24" class="btnTypeSet">
        <el-button type="danger"
                   icon="el-icon-plus"
                   @click="goPage('/charge_management/add_project_type')">新增类型</el-button>
      </el-col>
    </el-row>
    <!--表格-->
    <el-table
      size="mini"
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      align="center"
      style="width: 100%;text-align: center;">
      <el-table-column
        label="项目类型名称"
        align="center"
        width="330">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.typeName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="项目类型状态"
        align="center"
        width="330">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="goPage('/charge_management/amend_project_type')">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteRow(scope.$index, tableData)">删除</el-button>
            <!--@click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="footerBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total,prev,pager,next,jumper"
        :total="tableData.length">
      </el-pagination>
    </div>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        typeSetSearch:'',
        tableData: [
          {
            typeName: '项目类型1',
            status: '正常',
          },
          {
            typeName: '项目类型2',
            status: '正常',
          },
          {
            typeName: '项目类型3',
            status: '正常',
          },
          {
            typeName: '项目类型4',
            status: '正常',
          },
          {
            typeName: '项目类型5',
            status: '异常',
          },
          {
            typeName: '项目类型6',
            status: '正常',
          },
          {
            typeName: '项目类型7',
            status: '正常',
          },
          {
            typeName: '项目类型8',
            status: '正常',
          },
          {
            typeName: '项目类型9',
            status: '正常',
          },
          {
            typeName: '项目类型10',
            status: '正常',
          },
          {
            typeName: '项目类型11',
            status: '正常',
          },
          {
            typeName: '项目类型12',
            status: '正常',
          }
        ]
      }
    },
    methods: {
      deleteRow: function(index, rows) {
        var that = this;
        that.$confirm('确认删除此角色吗？','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          rows.splice(index, 1);
          that.$message({
            type: 'success',
            message: '删除成功!',
          });
        }).catch(function () {
          that.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      handleSizeChange: function (size) {
        this.pageSize = size;
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
      },
      goPage : function (url) {
        this.$router.push({path : url});
      },
      searchFun: function () {

      }
    }
  }
</script>

<style>
 .project_type_set .searchBox{
   height: 60px;
   line-height: 60px;
   padding-left: 30px;
   margin-bottom: 10px;
   background: #fff;
  }
 .project_type_set .table_btn{
   height: 60px;
   margin-bottom: 10px;
   background: #fff;
   padding: 10px 20px 30px;
   text-align: right;
 }
 .project_type_set .btnTypeSet{}
 .project_type_set .footerBox{
    width: 100%;
    height: 50px;
    text-align: right;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 9px;
  }
</style>
